<%@page import="com.multysite.entity.admin.ApplicationConfig"%>
<%@page import="com.multysite.entity.admin.ApplicationTemplate"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="com.multysite.entity.admin.Application"%>
<%@page import="java.util.TreeMap"%>
<%@page import="com.google.appengine.api.users.UserServiceFactory"%>
<%@page import="com.google.appengine.api.users.UserService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	UserService userService = UserServiceFactory.getUserService();
	ApplicationTemplate template = (ApplicationTemplate) request
			.getAttribute("template");
	ApplicationConfig siteConfig = (ApplicationConfig) request
			.getAttribute("config");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><%=siteConfig.getTitle() %> Setting</title>
<script type="text/javascript" src="/admin/js/jquery-1.6.1.min.js"></script>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
		
	$(document).ready(function() {
						
		var editor = ace.edit("editor");
		editor.setTheme("ace/theme/twilight");
		editor.getSession().setMode("ace/mode/php");
		
		//open popup
		$(".pop").click(function() {
			if($(this).attr("id")=="homePage"){
				$("#headerPopup").text("Edit Home Page");
				$("#action").val("homePage");
				$("#pageValue").val(unescape($("#homePageValue").text()));	
			}else if($(this).attr("id")=="detailPage"){
				$("#headerPopup").text("Edit Detail Page");
				$("#action").val("detailPage");
				$("#pageValue").val(unescape($("#detailPageValue").text()));	
			}else if($(this).attr("id")=="categoryPage"){
				$("#headerPopup").text("Edit Category Page");
				$("#action").val("categoryPage");
				$("#pageValue").val(unescape($("#categoryPageValue").text()));	
			}else if($(this).attr("id")=="tagPage"){
				$("#headerPopup").text("Edit Tag Page");
				$("#action").val("tagPage");
				$("#pageValue").val(unescape($("#tagPageValue").text()));	
			}else if($(this).attr("id")=="cssFile"){
				$("#headerPopup").text("Edit Css File");
				$("#action").val("cssFile");
				$("#pageValue").val(unescape($("#cssFileValue").text()));	
			}else if($(this).attr("id")=="jsFile"){
				$("#headerPopup").text("Edit Js File");
				$("#action").val("jsFile");
				$("#pageValue").val(unescape($("#jsFileValue").text()));	
			}else if($(this).attr("id")=="searchPage"){
				$("#headerPopup").text("Edit Search Page");
				$("#action").val("searchPage");
				$("#pageValue").val(unescape($("#searchPageValue").text()));	
			}
			prepareACE(editor);
			$("#overlay_form").fadeIn(200);			
			positionPopup();
		});

		//close popup
		$("#close").click(function() {
			$("#overlay_form").fadeOut(200);
		});

		$("#submit").click(function() {			
			$.post("/admin/template/process", {
				action : $("#action").val(),
				pageValue : $("#pageValue").val()
			}, function(data) {
				$("#overlay_form").fadeOut(200);					
				$("#" + $("#action").val() + "Value").html(escape($("#pageValue").val()));				
			});
			return false;
		});

	});

	//position the popup at the center of the page
	function positionPopup() {
		if (!$("#overlay_form").is(':visible')) {
			return;
		}
		$("#overlay_form").css({
			left : ($(window).width() - $('#overlay_form').width()) / 2,
			top : ($(window).width() - $('#overlay_form').width()) / 7,
			position : 'absolute'
		});
	}
	
	function prepareACE(editor){				
		var textarea = $('#pageValue').hide();
		editor.getSession().setValue(textarea.val());
		editor.getSession().on('change', function(){
		  textarea.val(editor.getSession().getValue());
		});
	}

	//maintain the popup at center of the page when browser resized
	$(window).bind('resize', positionPopup);
</script>
<style>
	#overlay_form {
		position: absolute;
		border: 5px solid gray;
		padding: 10px;
		background: white;
		width: 880px;
		height: 460px;
	}
	.button-pop {
		display: block;
		border: 1px solid gray;
		width: 65px;
		text-align: center;
		padding: 6px;
		border-radius: 5px;
		text-decoration: none;
		margin: 0 auto;
	}
	#editor { 
		position: absolute;
		top: 30px;
		right: 0;
		bottom: 0;
		left: 0;
		height: 338px
	}
</style>
</head>
<body>
	<h3><%=siteConfig.getTitle()%></h3>
	<p><a href="<%=siteConfig.getApplicationId()%>">(View Client)</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/admin/domain/add">(Add Domain)</a></p>
	<form action="/admin/application/edit" method="post">
		<table>
			<tr>
				<td>
					Id					
				</td>
				<td>
					<%=siteConfig.getApplicationId()%>
				</td>				
			</tr>
			<tr>
				<td>
					Title					
				</td>
				<td>
					<input type="text" style="width: 298px" name="siteTitle" value="<%=siteConfig.getTitle()%>"/>
				</td>				
			</tr>
			<tr>
				<td>
					Description					
				</td>
				<td>
					<textarea cols="40" rows="6" name="siteDescription"><%=siteConfig.getDescription()%></textarea>
				</td>				
			</tr>
			<tr>
				<td>
					Keyword					
				</td>
				<td>
					<input style="width: 298px" type="text" name="siteKeyword" value="<%=siteConfig.getKeyword()%>"/>
				</td>				
			</tr>
			<tr>
				<td>
										
				</td>
				<td>
					<input type="submit" value="Save">
				</td>				
			</tr>
		</table>					
	</form>	
		
	<hr width="400px" align="left">
	<h3>Edit Application Template</h3>
	<p> Home Template <a href="#" id="homePage" class="pop" title="Edit">(Edit)</a></p>
	<p>Detail Template <a href="#" id="detailPage" class="pop" title="Edit">(Edit)</a></p>
	<p>Category Template <a href="#" id="categoryPage" class="pop" title="Edit">(Edit)</a></p>
	<p>Tag Template <a href="#" id="tagPage" class="pop" title="Edit">(Edit)</a></p>
	<p>Search Template <a href="#" id="searchPage" class="pop" title="Edit">(Edit)</a></p>
	<p>Css File <a href="#" id="cssFile" class="pop" title="Edit">(Edit)</a></p>
	<p>Js File <a href="#" id="jsFile" class="pop" title="Edit">(Edit)</a></p>

	<form id="overlay_form" style="display: none">
		<h2 id="headerPopup"></h2>	
		<input type="hidden" id="action" value="">		
		<textarea name="pageValue" id="pageValue" rows="20" cols="118"/></textarea>
		<div style="position: relative;">
			<div id="editor"></div>
		</div>					
		<input type="submit" id="submit" value="Save" /> 
		<a href="#">Preview</a>&nbsp;|&nbsp; 
		<a href="#">Clear Edit</a>&nbsp;|&nbsp;
		<a href="#" id="close">Close</a>
	</form>	
	
	<textarea id="homePageValue" style="display: none;"/><%=template.getHome() %></textarea>
	<textarea id="detailPageValue" style="display: none;"/><%=template.getDetail() %></textarea>
	<textarea id="tagPageValue" style="display: none;"/><%=template.getTag() %></textarea>
	<textarea id="categoryPageValue" style="display: none;"/><%=template.getCategory() %></textarea>
	<textarea id="searchPageValue" style="display: none;"/><%=template.getSearch() %></textarea>
	<textarea id="cssFileValue" style="display: none;"/><%=template.getCss() %></textarea>
	<textarea id="jsFileValue" style="display: none;"/><%=template.getJs() %></textarea>
	<hr width="400px" align="left">
	<a href="/admin/news/list" title="New Application">(List News)</a>&nbsp;&nbsp;|&nbsp;
	<a href="/admin/news/add" title="New Application">(Add News)</a>
	<hr width="400px" align="left">	
	<%=userService.getCurrentUser().getEmail() %>&nbsp;
	<a href="/applications" title="New Application">(My Application)</a>&nbsp;&nbsp;|&nbsp;	
	<a href="/create" title="New Application">(Create Application)</a>&nbsp;&nbsp;|&nbsp;
	<a href="<%=userService.createLogoutURL("/")%>">(Logout)</a>	
</body>
</html>